<template>
  <div class="album-item">
    <div @click="$router.push({ name:'album',query:{ id:album.id }})" class="album-img">
      <img class="img" :src="album.picUrl+'?param=178y178'" alt="">
      <span class="img-bg"></span>
      <div class="play-btn"><span class="iconfont icon-palyer-start-01"></span></div>
    </div>
    <div @click="$router.push({ name:'album',query:{ id:album.id }})" class="album-name">{{album.name}}</div>
    <br />
    <div class="album-time">{{album.publishTime |albumtimeFormat}}</div>
  </div>

</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "album-item",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    album: {
      require: true,
    },
  },
  data() {
    //这里存放数据
    return {};
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.album-item {
  margin-bottom: 20px;
  margin-left: 14px;
  margin-right: 14px;
  .album-img {
    position: relative;
    width: 209px;
    height: 177px;
    cursor: pointer;
    .img {
      z-index: 2;
      width: 178px;
      height: 178px;
      border-radius: 5px;
    }
    .img-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 209px;
      height: 177px;
      background: url("../../assets/coverall.png") no-repeat;
      background-position: 0 -986px;
    }
    .play-btn {
      z-index: 2;
      position: absolute;
      bottom: 72px;
      left: 72px;
      height: 40px;
      width: 40px;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      opacity: 0%;
      background-color: rgb(255, 255, 255);
      .icon-palyer-start-01 {
        font-size: 25px;
        padding-left: 5px;
        color: rgb(113, 198, 255);
      }
    }
    @keyframes showbtn {
      from {
        opacity: 0%;
      }
      to {
        opacity: 100%;
      }
    }
  }
  .album-img:hover .play-btn {
    opacity: 100%;
    animation: showbtn 1s;
  }
  .album-name {
    display: inline-block;
    cursor: pointer;
    color: rgb(71, 71, 71);
    width: 170px;
    max-height: 42px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 10px;
  }
  .album-name:hover {
    color: rgb(22, 22, 22);
  }
  .album-time {
    margin-top: 10px;
    cursor: default;
    display: inline-block;
    color: rgb(172, 172, 172);
  }
}
</style>